import { ScrollView, View } from "@tarojs/components";
import {
  WapHomeOutlined,
  AppsOutlined,
  LocationOutlined,
  PhoneOutlined,
  ChatOutlined,
  EnvelopOutlined,
  ArrowUp,
} from "@taroify/icons";
import { Image, Popup, FloatingBubble } from "@taroify/core";
import logo from "@/assets/images/logo.png";
import HeaderStyle from "./index.module.scss";
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "@/store";
import Taro from "@tarojs/taro";
import Bg from "@/assets/images/b.jpg";
import { setCommodityId, setHomeShow } from "@/store/reducers/businessInfo";
import { setActive } from "@/store/reducers/tabbar";
import Menu from "../Menu/index";

interface HeaderPrps {
  isHome?: boolean;
  noInfo?: boolean;
}

export default function Index(props: HeaderPrps) {
  const dispatch = useDispatch();
  const [open, setOpen] = useState<boolean>(false);
  const categoryList = useSelector(
    (state: RootState) => state.category.categoryList
  );
  const businessCategoryList = useSelector(
    (state: RootState) => state.category.businessCategoryList
  );
  const businessId = useSelector(
    (state: RootState) => state.business.businessId
  );
  const isHomeShow = useSelector(
    (state: RootState) => state.business.isHomeShow
  );
  const businessInfo = useSelector((state: RootState) => state.business.info);
  const { isHome = false, noInfo = false } = props;

  console.log(categoryList);

  const handleChange = (id) => {
    setOpen(false);
    if ((!isHome && businessId) || (isHome && isHomeShow && businessId)) {
      dispatch(setHomeShow(true));
      if (id === 1) {
        Taro.switchTab({ url: "/pages/home/index" });
        dispatch(setActive(0));
      } else if (id === 2) {
        Taro.switchTab({ url: "/pages/about/index" });
        dispatch(setActive(2));
      } else if (id === 3) {
        Taro.navigateTo({
          url: "/packages/feedBck/index",
        });
      } else if (id === 4) {
        Taro.navigateTo({
          url: "/packages/concatUs/index",
        });
      } else if (id === 5) {
        Taro.navigateTo({
          url: "/packages/ratings/index",
        });
      } else {
        dispatch(setCommodityId(id));
        Taro.switchTab({
          url: `/pages/classify/index`,
        });
        dispatch(setActive(1));
      }
    } else {
      if (id !== 1) {
        Taro.navigateTo({
          url: `/packages/productView/index?id=${id}`,
        });
      } else {
        Taro.switchTab({ url: "/pages/home/index" });
      }
    }
  };

  const gotoHome = () => {
    dispatch(setHomeShow(false));
    dispatch(setActive(0));
    Taro.switchTab({ url: "/pages/home/index" });
  };

  const onClick = () => {
    Taro.pageScrollTo({
      scrollTop: 0,
      duration: 300,
    });
  };

  return (
    <View>
      {!isHome && (
        <FloatingBubble
          className="floating-bubble1"
          icon={<ArrowUp />}
          onClick={onClick}
          axis="xy"
          magnetic="y"
        />
      )}

      <View className={HeaderStyle.header}>
        <WapHomeOutlined onClick={() => gotoHome()} size={20} />
        <Image
          onClick={() => gotoHome()}
          mode="aspectFit"
          height={50}
          width="100%"
          src={logo}
        />
        <AppsOutlined onClick={() => setOpen(true)} size={20} />
      </View>

      {isHome
        ? businessId &&
          isHomeShow &&
          !noInfo && (
            <View style={{ position: "relative" }}>
              <View
                style={{
                  backgroundImage: `url(${Bg})`,
                  backgroundRepeat: "no-repeat",
                  backgroundSize: "auto 100%",
                  backgroundPosition: "center center",
                  padding: "18px 30px",
                  display: "flex",
                  flexDirection: "column",
                  gap: "10px",
                  fontSize: "14px",
                  borderRadius: "10px",
                }}
              >
                <View
                  style={{
                    marginBottom: "5px",
                    textOverflow: "ellipsis",
                    overflow: "hidden",
                    whiteSpace: "nowrap",
                    fontSize: "16px",
                  }}
                >
                  {businessInfo.businessName}
                </View>
                <View className={HeaderStyle.flex}>
                  <LocationOutlined />
                  <View>{businessInfo.producer}</View>
                  <View>{businessInfo.establishment}</View>
                </View>
                <View className={HeaderStyle.flex}>
                  <PhoneOutlined />
                  <View>{businessInfo.phone}</View>
                </View>
                <View className={HeaderStyle.flex}>
                  <ChatOutlined />
                  <View>{businessInfo.wxAccount}</View>
                </View>
                <View className={HeaderStyle.flex}>
                  <EnvelopOutlined />
                  <View>{businessInfo.email}</View>
                </View>
                <View className={HeaderStyle.flex}>
                  <LocationOutlined />
                  <View
                    style={{
                      textOverflow: "ellipsis",
                      overflow: "hidden",
                      whiteSpace: "nowrap",
                    }}
                  >
                    {businessInfo.address}
                  </View>
                </View>
              </View>
              <View style={{ height: "97px" }}>
                {businessInfo.images && (
                  <Image
                    src={
                      process.env.TARO_APP_API +
                      businessInfo.images.split(",")[0]
                    }
                    width="100%"
                    height={97}
                  />
                )}
              </View>
              {businessInfo.codeImage && (
                <View
                  style={{
                    position: "absolute",
                    top: "60px",
                    right: "40px",
                    textAlign: "center",
                  }}
                >
                  <Image
                    src={process.env.TARO_APP_API + businessInfo.codeImage}
                    width={70}
                    height={70}
                    mode="aspectFill"
                  />
                  <View>{businessInfo.comprehensiveScore?.toFixed(1)}</View>
                </View>
              )}
            </View>
          )
        : businessId &&
          !noInfo && (
            <View style={{ position: "relative" }}>
              <View
                style={{
                  backgroundImage: `url(${Bg})`,
                  backgroundRepeat: "no-repeat",
                  backgroundSize: "auto 100%",
                  backgroundPosition: "center center",
                  padding: "18px 30px",
                  display: "flex",
                  flexDirection: "column",
                  gap: "10px",
                  fontSize: "14px",
                  borderRadius: "10px",
                }}
              >
                <View
                  style={{
                    marginBottom: "5px",
                    textOverflow: "ellipsis",
                    overflow: "hidden",
                    whiteSpace: "nowrap",
                    fontSize: "16px",
                  }}
                >
                  {businessInfo.businessName}
                </View>
                <View className={HeaderStyle.flex}>
                  <LocationOutlined />
                  <View>{businessInfo.producer}</View>
                  <View>{businessInfo.establishment}</View>
                </View>
                <View className={HeaderStyle.flex}>
                  <PhoneOutlined />
                  <View>{businessInfo.phone}</View>
                </View>
                <View className={HeaderStyle.flex}>
                  <ChatOutlined />
                  <View>{businessInfo.wxAccount}</View>
                </View>
                <View className={HeaderStyle.flex}>
                  <EnvelopOutlined />
                  <View>{businessInfo.email}</View>
                </View>
                <View className={HeaderStyle.flex}>
                  <LocationOutlined />
                  <View
                    style={{
                      textOverflow: "ellipsis",
                      overflow: "hidden",
                      whiteSpace: "nowrap",
                    }}
                  >
                    {businessInfo.address}
                  </View>
                </View>
              </View>
              <View style={{ height: "97px" }}>
                {businessInfo.images && (
                  <Image
                    src={
                      process.env.TARO_APP_API +
                      businessInfo.images.split(",")[0]
                    }
                    width="100%"
                    height={97}
                  />
                )}
              </View>
              {businessInfo.codeImage && (
                <View
                  style={{
                    position: "absolute",
                    top: "60px",
                    right: "40px",
                    textAlign: "center",
                  }}
                >
                  <Image
                    src={process.env.TARO_APP_API + businessInfo.codeImage}
                    width={70}
                    height={70}
                    mode="aspectFill"
                  />
                  <View>{businessInfo.comprehensiveScore?.toFixed(1)}</View>
                </View>
              )}
            </View>
          )}

      <Popup
        open={open}
        placement="right"
        style={{ width: "70%", height: "100%", zIndex: 10001 }}
        onClose={() => setOpen(false)}
        lock={false}
      >
        <Popup.Backdrop style={{ zIndex: 10000 }} />
        <ScrollView className={HeaderStyle.content} scrollY>
          <View
            style={{ display: "flex", flexDirection: "column", gap: "5px" }}
          >
            {(businessId && !isHome) || (isHome && businessId && isHomeShow) ? (
              <Menu
                data={businessCategoryList}
                isLink={true}
                handleLink={(data) => handleChange(data.id)}
              ></Menu>
            ) : (
              <Menu
                data={categoryList}
                isLink={true}
                handleLink={(data) => handleChange(data.id)}
              ></Menu>
            )}
            {/* businessCategoryList.map((item, index) => (
                <View
                  className={[HeaderStyle.menuItem].join(" ")}
                  key={item.id}
                  onClick={() => handleChange(item.id)}
                >
                  {item.categoryName}
                </View>
              )) */}
            {/* categoryList.map((item, index) => (
                  <View
                    className={[HeaderStyle.menuItem].join(" ")}
                    key={item.id}
                    onClick={() => handleChange(index, item.id)}
                  >
                    {item.categoryName}
                  </View>
                )) */}
          </View>
        </ScrollView>
      </Popup>
    </View>
  );
}
